<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/plus.css">
    <link rel="stylesheet" href="./css/item.css">
    <link rel="stylesheet" href="./css/MF.css">
    <link rel="stylesheet" href="./iconfonts/iconfont.css">
</head>

<body style="background: white;">
    <!-- 头部区域开始 -->
    <div id="header">
        <div class="header-con">
            <!-- 左侧导航 -->
            <ul class="header-nav">
                <li> <a href="index.html" style="color: #ccc;">小米商城</a> |&nbsp;</li>
                <li>MIUI |&nbsp;</li>
                <li>loT |&nbsp;</li>
                <li>云服务 |&nbsp;</li>
                <li>水滴 |&nbsp;</li>
                <li>金融 |&nbsp;</li>
                <li>有品 |&nbsp;</li>
                <li>Select Region</li>
            </ul>
            <!-- 右侧导航 -->
            <div class="header-right">
                <div class="header-right">
                    <div id="welcomeBox">
                        欢迎您：<span id="usernameSpan"></span>
                        &nbsp;&nbsp;<input id="btnLogout" type="button" value="注销" />
                    </div>
                    <div id="loginBox">
                        <a href="login.html">&nbsp;&nbsp;登录</a>
                    </div>
                    <a href="reginset.html">&nbsp;&nbsp;注册 &nbsp;&nbsp;</a>
                    <a href="#">消息通知&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <!-- 购物车显示区域 -->
                    <p class="Cart">
                        <i class="iconfont icon-gouwuchekong
                "></i> 购物车
                    </p>
                    <!-- 显示购物车 -->
                    <div class="p-cart">
                        购物车中还没有商品赶紧买吧
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部区域结束 -->
        <!-- logo部分开始 -->
        <div id="logo">
            <div class="logo-con">
                <!-- 左侧logo -->
                <h1><img src="./images/logo.jpg" alt=""></h1>
                <!-- logo导航 -->
                <ul class="logo-nav">
                    <li>
                        全部商品分类
                    </li>
                    <li>小米手机
                        <ul class="logo-lastnav">
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                        </ul>
                    </li>
                    <li>红米
                        <ul class="logo-lastnav" style="left: -309px;">
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                        </ul>
                    </li>
                    <li>电视
                        <ul class="logo-lastnav" style="left: -367px;">
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                        </ul>
                    </li>
                    <li>笔记本
                        <ul class="logo-lastnav" style="left: -422px;">
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                        </ul>
                    </li>
                    <li>盒子
                        <ul class="logo-lastnav" style="left: -492px;">
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                        </ul>
                    </li>
                    <li>新品
                        <ul class="logo-lastnav" style="left: -553px;">
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                        </ul>
                    </li>
                    <li>路由器
                        <ul class="logo-lastnav" style="left: -603px;">
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                        </ul>
                    </li>
                    <li>智能硬件服务</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
                <!-- 右侧搜索框 -->
                <div class="search">
                    <input type="text">
                    <button><i class="iconfont icon-fangdajing
                "></i></button>
                </div>
            </div>
        </div>
        <!-- logo部分结束-->
        <!-- 参数页 -->
        <div id="part">
            <div class="part-con">
                <p style="font-size: 18px;" class="name">XiaoMi MIX4 | <i style="color: #ccc;font-size: 14px;"> mix Fold
                        小米折叠手机</i>
                </p>
                <ul class="part-nav">
                    <li>概述页</li>
                    <li>参数页</li>
                    <li>F码通道</li>
                    <li>咨询客服</li>
                    <li>用户评价</li>
                </ul>
            </div>
        </div>
        <!--详情页 -->
        <div id="page">
            <div class="page-con">
                <!-- 左侧小盒子 -->
                <div id="small_box">
                    <!-- 遮挡层 -->
                    <div id="mask"></div>
                    <!-- 右侧大盒子 -->
                    <div id="big_box"></div>
                    <!-- 底下图片 -->
                    <!-- 左右按钮 -->
                    <button id="previous"><i class="iconfont icon-zuo"></i> </button>
                    <button id="next"> <i class="iconfont icon-you"></i> </button>
                </div>
                <ul id="page-li">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="last-li"></li>
                </ul>

                <!-- 右侧介绍手机详情 -->
                <div class="page-right">
                    <!-- 介绍小米 -->
                    <div class="page-top">
                        <h3 class="name"></h3>
                        <p> <i
                                style="color: orangered;">「购机最高享24期分期免息;+949元得Micare保障服务」</i>CUP全面屏|真彩原色＋120Hz|—体化轻量陶瓷机身|高通骁龙TM888+
                            | WiFi
                            6增强版|石墨烯「冰封」散热系统4500mAh大电量|常温120W快充|50W无线快充|1亿像素电影相机
                        </p>
                        <span style="margin-top: 16px;display: block;color: orangered;margin-left: 6px;">小米自营</span>
                        <h5 class="moneys">4999元</h5>
                    </div>
                    <!-- 地址 -->
                    <div class="address">
                        <p><i class="iconfont icon-dizhiguanli"></i>
                            陕西省 西安市 灞桥区 红旗街道 <i style="color: orangered;">修改</i> <br> &nbsp;&nbsp;&nbsp;&nbsp;
                            <i style="color: orangered;">有现货</i>
                        </p>
                    </div>
                    <!-- 选择版本 -->
                    <div class="version">
                        <h2>选择版本</h2>
                        <p class="first">8GB+128GB</p>
                        <p>16GB+128GB</p>
                        <p>8GB+256GB</p>
                        <p>16GB+256GB</p>
                    </div>
                    <!-- 选择颜色 -->
                    <div class="color">
                        <h2>选择颜色</h2>
                        <p class="first">陶瓷黑</p>
                        <p>热辣粉</p>
                        <p>翡翠绿</p>
                    </div>
                    <!-- 保险 -->
                    <div class="baoxian">
                        <img src="./images/bx_03.png" alt="">
                    </div>
                    <!-- money -->
                    <div class="money">
                        <span class="o">Xiao Mi MIX 8GB+128GB 陶瓷黑</span>
                        <span class="b moneys">4999元</span>
                        <p>总计:4999元</p>
                    </div>
                    <!-- 购买 -->
                    <div class="like">
                        <!-- 加入购物车 -->
                        <a href="javascript:;" id="addCart"><input type="submit" value="加入购物车"></a>
                        <button>喜欢</button>
                        <img src="./images/dui_03.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 警示 -->
        <div id="talk">
            <div class="talk-con">
                <h3>价格说明</h3>
                <p style="margin:30px 0;">
                    <strong>划线价:</strong>
                    商品展示的划横线价格为参考价，该价格可能是商品首次上市销售价、品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在小米商城曾经展示过的销售价;由于地区、时间的差异性和市场行情的波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格并非原价、仅供参考，
                </p>
                <p style="margin-bottom: 30px;"> <strong>未划线价;</strong>
                    指商品的实时搠售价格，其不因表述的差异改变性质,但商品具体结算价格可能因该商品参与的满减、预售、限时优商等单个或多个活动，或者因使用优惠券、红包、米金等而发生变化，最终请以订单结算页展示为准。
                </p>
                <p> <strong>其他;</strong>
                    商品详情页(含主图)以图片或文字形式标注的到手价、券后价、众等价、尝鲜价等价格可能是商品在使用优惠券或参与精定优惠活动或在转定时间段等情形下，由系统根据相应规则计算得出的预估单品结算价格。具体请以订单结算页面的标价、优惠条件或具体活动规则为准。

                </p>

            </div>
        </div>
        <!-- 结束 -->
        <div id="footer">
            <div class="footer-con">
                <!-- footer头部 -->
                <ul class="footer-top">
                    <li><i class="iconfont icon-weixiu"></i> 预约维修服务</li>
                    <li><i class="iconfont icon-qitianwuliyoutuihuan"></i> 7天无理由退货</li>
                    <li><i class="iconfont icon-15"></i> 15天免费退货</li>
                    <li><i class="iconfont icon-liwu"></i> 源69包邮</li>
                    <li><i class="iconfont icon-dizhiguanli"></i> 502家售后网店</li>
                </ul>
                <!-- 内容导航 -->
                <dl class="footer-nav">
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>服务支持</dt>
                    <dd>售后服务</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                    <dd>企业社会责任关系</dd>
                    <dd>廉洁举报</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                    <dd>公益基金会</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
                <div class="footer-right">
                    <img src="./images/kf_03.png" alt="">
                </div>
            </div>
        </div>
        <!-- 公示-->
        <div id="item">
            <div class="item-con">
                <h1><img src="./images/logo.jpg" alt=""></h1>
                <a href="#">小米商城 |</a>
                <a href="#">MIUI |</a>
                <a href="#">米家 |</a>
                <a href="#">米聊 |</a>
                <a href="#">多看 |</a>
                <a href="#">游戏 |</a>
                <a href="#">政企服务 |</a>
                <a href="#">小米天猫店 |</a>
                <a href="#">小米集团隐私政策 |</a>
                <a href="#">小米公司儿童信息保护规则 |</a>
                <a href="#">小米商城隐私政策 |</a>
                <a href="#">小米商城用户协议 |</a>
                <a href="#">问题反馈 |</a> <br>
                <a href="#">北京互联网发原法律服务工作站 |</a>
                <a href="#">中国消费者协会</a>
                <a href="#">北京市消费者协会</a>
                <p>mi.com京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2020]0276-042号
                    (京)网械平台备字(2018）第00005号互联网药品信息服务资格证(京)-非经营性-2014-0090营业执照医疗器械质量公告增值电信业务许可证网络食品经营备案京食药网食备202010048食品经营许可证
                    违法和不良信息举报电话:171-5104-4404-知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <div class="item-footer">
                    <img src="./images/end_03.png" alt="">
                </div>
                <!-- 侧边导航 -->
                <div class="r-nav">
                    <ul class="nav-end">
                        <li>
                            <a href="#"><img src="./images/phonepic/o1.png" alt=""></a>
                            <p>手机APP</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o2.png" alt=""></a>
                            <p>个人中心</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o3.png" alt=""></a>
                            <p>售后服务</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                            <p>人工客服</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                            <p>购物车</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</body>

</html>
<script src="./js/font.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/cookieTools.js"></script>
<script>
    let osmall = document.querySelector('#small_box');
    let omask = document.querySelector('#mask');
    let obig = document.querySelector('#big_box');
    let olis = document.querySelector('#page-li').querySelectorAll('li');
    // console.log(olis);
    let x = new mf(osmall, omask, obig, olis);
    x.eventBind();

    // 头部右侧导航显示购物车
    let oCart = document.querySelector('.Cart');
    let oPcart = document.querySelector('.p-cart');
    oCart.onmouseover = function () {
        oCart.style.backgroundColor = 'white';
        oPcart.style.display = 'block';
    }
    oCart.onmouseout = function () {
        oCart.style.backgroundColor = '';
        oPcart.style.display = 'none';
    }

    // cookie

    function initUI() {
        let username = getCookie("username");
        if (username) {
            $("#usernameSpan").html(username);
            $("#welcomeBox").css({
                "display": "block"
            });
            $("#loginBox").css({
                "display": "none"
            });
        } else {
            $("#loginBox").css({
                "display": "block"
            });
            $("#welcomeBox").css({
                "display": "none"
            });
        }
    }

    $(function () {
        initUI();
        $("#btnLogout").click(function () {
            removeCookie("username");
            initUI();
        });
    });

    //手机放大镜接受数据并渲染页面
    $(function () {
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        // console.log(GetQueryString("goodsId"));
        let id = GetQueryString("goodsId")
        $.ajax({
            url: './getGoodsInfo.php',
            method: 'get',
            data: {
                goodsId: id
            },
            success: function (result) {
                getPhoneData(JSON.parse(result))
            }
        })
        // 点击购买跳转购物车  并渲染购物车页面
        let username = getCookie("username");
        $('#addCart').click(function () {
            $.ajax({
                url: "addShoppingCart.php",
                method: "POST",
                data: {
                    vipName: username,
                    goodsId: id,
                    goodsCount: 1
                },
                success: function (result) {
                    // getTvData(JSON.parse(result))
                    console.log(result);
                    if (!username) {
                        alert("请你先登录");
                        // window.location.href = 'login.html';
                    } else {
                        alert("商品添加成功")
                        window.location.href = 'cart.html';
                    }

                }
            });
        })
    });
    // 遍历循环这个对象
    function getPhoneData(res) {
        for (let k in res) {
            if (k == 'goodsName') {
                $('.name').html(`
               ${res[k]}
                `)
            }
            if (k == 'goodsPrice') {
                $('.moneys').html(`
               ${res[k]}
                `)
            }

        }
    }
    // 点击购物车
</script>